<script setup >
import { reactive, ref } from 'vue';
import { useListAsync, formatTimestamp } from '../../../swy-hook/getList.js'
import addForm from './addForm.vue';
import { useArticleState } from '../../../swy-hook/index.js'
import { getcateListApi2 } from '../../../api/cate'
import { delarticleApi } from '../../../api/article'
import { ElMessage } from "element-plus";
const ArticleList = useArticleState(true)
const { getList, list, count } = useListAsync()
const addRef = ref()
// const create_time = ref('')
const getcatenameList = ref([])
const creatTime = ref()
const queryData = reactive({
  pageSize: 3,
  current: 1,
  cate_id: '',
  title: '',
  status: '',
  create_time: '',
  pic_url: '',
  id: null
})
const initData = async () => {
  let { data } = await getcateListApi2()
  // console.log(data);
  getcatenameList.value = data
}
// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  getList('content/article', queryData)
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  getList('content/article', queryData)
};
// 显示类型文字
const showState3 = (val) => {
  let res = ArticleList.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};
// 搜索确定

const onSearch = () => {
  queryData.create_time = creatTime.value
  if (Array.isArray(queryData.create_time)) {
    queryData.create_time = queryData.create_time.join(',')
  }
  queryData.current = 1;

  getList('content/article', queryData)
};
// 搜索取消
const onReset = () => {
  creatTime.value = ''
  Object.assign(queryData, {
    pageSize: 3,
    current: 1,
    cate_id: '',
    title: '',
    status: '',
    create_time: '',
    pic_url: '',
    creatTime: ''
  });
  getList('content/article', queryData)
};
// --------------------------------修改功能------
const editRow = (id) => {
  addRef.value.replyData(id);
  // queryData.id=''
  getList('/content/article', queryData)
};
// --------------------------------删除功能------
const delRow = async (id) => {
  await delarticleApi(id)
  ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--
  getList('/content/article', queryData)
}
onMounted(() => {
  getList('content/article', queryData)
  initData()
});

</script>

<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;">
      <b style="margin-right: 10px; font-size: large;">资讯管理</b>
      <span>用于一些党建宣传，社区知识等相关文章信息的编辑发布</span>
    </div>
    <el-card>
      <!-- 搜索区域 -->
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">
        <el-row type="flex" justify="">
          <el-form-item style="width: 200px;" label="文章标题">
            <el-input placeholder="请输入" v-model="queryData.title">
            </el-input>
          </el-form-item>
          <el-form-item style="width: 200px;" label="分类名">
            <el-select placeholder="请输入" v-model="queryData.cate_id" clearable>
              <el-option v-for="item in getcatenameList" :key="item.id" :label="item.catename"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 200px;" label="状态">
            <el-select placeholder="请输入" v-model="queryData.status" clearable>
              <el-option v-for="(item, index) in ArticleList" :key="index" :label="item.label"
                :value="item.value"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <div class="block">
              <!-- <span class="demonstration">Default</span> -->
              <el-date-picker v-model="creatTime" type="daterange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" :size="size" value-format="x" />
            </div>
          </el-form-item>
          <el-form-item style="padding-top: 30px;">
            <!-- <template> -->
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
            <!-- </template> -->
          </el-form-item>

        </el-row>
      </el-form>
      <!-- 表格区域 -->

    </el-card>

    <el-card style="margin-top: 15px;">
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.drawer = true">新增咨询</el-button>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="ID"></el-table-column>
        <el-table-column prop="title" label="文章标题">
        </el-table-column>
        <el-table-column label="分类名">
          <template #default="{ row }">
            {{ row.article_cate?.catename }}
          </template>
        </el-table-column>
        <el-table-column prop="pic_url" label="封面图">
          <template #default="{ row }">
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="`http://124.223.14.236:8881${row.pic_url}`"
                :zoom-rate="1.2" :preview-src-list="[`http://124.223.14.236:8881${row.pic_url}`]" :initial-index="99"
                :z-index="99" fit="cover" :preview-teleported="true" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            {{ showState3(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="{ row }">
            {{ formatTimestamp(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="success">编辑</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination style="float: right;" @size-change="sizeChange" @current-change="currentChange"
        v-model:current-page="queryData.current" v-model:page-size="queryData.pageSize"
        layout="total, prev, pager, next" :total="count" background>
      </el-pagination>
      <br>
      <br>
      <!-- 新增修改组件 -->
      <addForm ref="addRef" @updateList="getList('content/article', queryData)" />
    </el-card>
  </div>
  <!-- 底部区域 -->
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>

<style scoped>
img {
  max-width: 100px;
  max-height: 100px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>